<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;


}

.dropbox{

width: 120px;

}



.dropbox:hover .droplist{

display: block;

}

.dropbt{

width: 120px;

height: 40px;

background: #369;



text-align: center;

line-height: 40px;



color: #fff;



cursor: pointer;

}

.droplist{



box-shadow: 0 1px 2px #222;



display: none;

}

.droplist li{



height: 40px;

text-align: center;

line-height: 40px;

}



.droplist a:hover{

background: #ccc;

}

.droplist a{



display: block;



color: #000;

}

</style>

</head>

<body>

<div class="dropbox">

<div class="dropbt">点我下拉菜单</div>

<ul class="droplist">

<li><a href="#">我是下拉项</a></li>

<li><a href="#">我是下拉项</a></li>

<li><a href="#">我是下拉项</a></li>

<li><a href="#">我是下拉项</a></li>

<li><a href="#">我是下拉项</a></li>

</ul>

</div>


</body>

</html> 